<template>
  <div>
    我是登录和注册页面
 
    <div class="demoInput">
      <p :class="btnbool?'ck':''" @click="btnbool=true;com='InputOne'">登录</p>
      <p :class="btnbool?'':'ck'" @click="btnbool=false;com='InputTwo'">注册</p>
    </div>
<keep-alive include="InputOne">
  <component :is="com"></component>
</keep-alive>
    
  </div>
</template>

<script>
import InputOne from "@/components/InputOne.vue"
import InputTwo from "@/components/InputTwo.vue"
export default {
  components:{
    InputOne,
    InputTwo
  },
  data(){
    return {
      btnbool:true, //如果为true就是登录高亮  反之 注册高亮
      com:"InputOne"
    }
  }
}
</script>

<style scoped>
.ck{
  background-color: red;
}
  .demoInput{
    width: 60%;
    height: 50px;
    border: 1px solid red;
    display: flex;
    text-align: center;
    line-height: 50px;
    margin: 0 auto;
  }
  .demoInput>p{
    flex: 1;
  }
</style>